<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-notice-bar"
		:class="_classes"
		:style="_styles"
	>
		<!-- 通知图标 -->
		<view
			class="pure-notice-bar__icon pure-notice-bar__icon--notice"
			v-if="showIcon"
			:hover-class="hoverClass"
		>
			<slot name="icon">
				<pure-icon :name="iconName"></pure-icon>
			</slot>
		</view>

		<!-- 左侧内容 -->
		<view
			class="pure-notice-bar__left"
			v-if="$slots.left"
		>
			<slot name="left"> </slot>
		</view>

		<!-- 通知内容 -->
		<view class="pure-notice-bar__body">
			<!-- 横向 -->
			<pure-notice-bar-items-horizontal
				v-bind="_props"
				v-if="!vertical"
				@onItemClick="_handleItemClick"
			></pure-notice-bar-items-horizontal>

			<!-- 纵向 -->
			<pure-notice-bar-items-vertical
				v-bind="_props"
				v-else
				@onItemClick="_handleItemClick"
			></pure-notice-bar-items-vertical>
		</view>

		<!-- 右侧内容 -->
		<view
			class="pure-notice-bar__right"
			v-if="$slots.right"
		>
			<slot name="right"> </slot>
		</view>

		<!-- 箭头图标 -->
		<view
			class="pure-notice-bar__icon pure-notice-bar__icon--arrow"
			v-if="showArrow"
			@tap="$emit('onArrow')"
			:hover-class="hoverClass"
		>
			<slot name="arrow">
				<pure-icon :name="arrowIconName"></pure-icon>
			</slot>
		</view>

		<!-- 关闭图标 -->
		<view
			class="pure-notice-bar__icon pure-notice-bar__icon--close"
			v-if="showClose"
			@tap="$emit('onClose')"
			:hover-class="hoverClass"
		>
			<slot name="close">
				<pure-icon :name="closeIconName"></pure-icon>
			</slot>
		</view>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed } from "vue";
	import props from "./props";
	import pureNoticeBarItemsHorizontal from "./pure-notice-bar-items-horizontal.vue";
	import pureNoticeBarItemsVertical from "./pure-notice-bar-items-vertical.vue";

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onItem", "onArrow", "onClose"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 显示状态
		if (_props?.show) array.push("pure-notice-bar--show");
		else array.push("pure-notice-bar--hide");

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];
		return array;
	});

	// 点击事件
	function _handleItemClick(index, item) {
		_emits("onItem", index, item);
	}
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
